<template>
  <div class="common-layout">
    <el-container class="el-container">
      <el-header class="header"><Header/></el-header>
      <el-container class="foot">
        <el-aside width="200px" class="aside"><Aside/></el-aside>
        <el-main style="background: #c9c4c4;"><Main/></el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Header from "../../components/Sixth/Header.vue";
import Aside from "../../components/Sixth/Aside.vue";
import Main from "../../components/Sixth/Main.vue";
import {onMounted, reactive, watch} from "vue";
import {loadUser} from "../../api/Sixth/csms";
import {UserInfoStore} from "../../stores/csms";
export default {
  name: "TestView",
  components:{
    Header,
    Aside,
    Main,
  },
  setup(){
    function getRole(){
      const username = window.sessionStorage.getItem("username");
      loadUser(username).then(res=>{
        console.log(res);
        UserInfoStore().saveCsmsUser(res.data.data);
      })
    }
    onMounted(()=>{
      getRole();
    })
    return {onMounted};
  }
}
</script>

<style scoped>
/*设置整个页面样式*/
html, body{
  height: 100%;
}
/*设置顶栏样式*/
.el-container{
  gap: 10px;
  height: 100%;
  background: white;
}
.header{
  display: contents;
  background: #eeeeee;
}
/*设置侧边栏样式*/
.aside{
  background: #98caf8;
}
/*设置主体样式*/
.foot{
  width: 100%;
}

</style>
